<!DOCTYPE html>
<html lang="en">
<head>
    <title>H5请假审核</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!--字体-->
    <link href="/dist/css/oa-app.css" rel="stylesheet"/>
</head>
<style>

    body {
        margin: 0px;
        background: #eee;
    }
    .qjsy{
        border-top:1px solid #ddd;
        background: #fff;
    }
    .qjsy textarea,.desc{
        width: 100%;
        border: none;
        font-size: 16px;
        padding: 0 20px;
        line-height: 24px;
        height: 80px;
    }
    .qjsm{
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
        font-size: 16px;
        color: #83888a;
    }
    .qjsmActive{
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
        font-size: 16px;
        color: #4796e5;
    }
    .qjsy .title{
        height: 45px;
        line-height: 45px;
        padding-left: 20px;
        font-size: 16px;
        color: #262626;
        position: relative;
    }
    .qjsy .title i{
        position: absolute;
        left: 5px;
        top: 1px;
        font-size: 20px;
        color: red;
    }
    .qjsm span{
        font-size: 16px;
        margin: 0 2px;
    }

</style>
<body>
<section class="content" id="app" v-cloak style="padding-bottom: 50px;">
    <div class="div-td-content-more"><i></i></div>
    <!--今日已请假-->
    <div class="qjsmActive">{{leaveTitle}}</div>
    <div class="qjsy">
        <div class="title"><i>*</i>请假事由</div>
        <div class="desc">{{leaveDesc}}</div>
    </div>

    <table class="oa-table" v-if="createAudit&&createAudit.length>0" style="        margin-top: 20px;">
        <thead>
        <tr>
            <th colspan="4">审批进度</th>
        </tr>
        </thead>
    </table>

    <table class="oa-table" style="width: 100%;table-layout: fixed;background: #fff;" v-if="createAudit&&createAudit.length>0">
        <tbody>
        <tr class="oa-table-title-gray">
            <th class="td-title" style="width: 50px;text-align: center;">审核人</th>
            <th class="td-title" style="width: 60px;text-align: center;">审核状态</th>
            <th class="td-title" style="width: 100px;text-align: center;">审核时间</th>
            <th class="td-title">审核意见</th>
        </tr>
        <tr v-for="(item,i) in createAudit">

            <td style="text-align: center;">
                <span class="oa-name oaColor">{{item.auditorName}}</span>
            </td>
            <td style="text-align: center;">
                <span v-if="item.auditFlag===0" style="color:red;">待审核</span>
                <span v-else-if="item.auditFlag===1" class="oaColor">已通过</span>
                <span v-else-if="item.auditFlag===2||item.auditFlag===-2" style="color:red;">已驳回</span>
                <span v-else-if="item.auditFlag===-1" class="oaColor">未提交</span>
                <span v-else-if="!item.auditFlag" class="oaColor">未提交</span>
            </td>
            <td style="text-align: center;" class="oaColor">
                {{formatDate(item.auditTime)}}
            </td>
            <td class="oa-lineOne" @click.stop="showMore($event.target)" style="color: #2a8cec;text-align: left;">{{item.auditAdvise}}
            </td>
        </tr>


        </tbody>
    </table>

    <div class="oa-footer-btns" v-if="auditFlag=='-1'&&currentAuditorId==userId"><div  @click="audit(1)">通过</div><div  @click="audit(2)">驳回</div><i></i></div>
    <div class="oa-footer-btn" v-else-if="auditFlag=='-1'" @click="returnList" style="background: #aaa;">待审核</div>
    <div class="oa-footer-btn" v-else-if="auditFlag=='1'" @click="returnList" style="background: #aaa;">已通过</div>
    <div class="oa-footer-btn" v-else-if="auditFlag=='2'||auditFlag=='-2'" @click="returnList" style="background: #aaa;">已驳回</div>


</section>
<!--JQ-->
<!--插件JS-->
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/vue/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            mainId:getUrlParamObj().mainId,
            userId: getUrlParamObj().userId,
            currentAuditorId:'',
            auditFlag:'',
            leaveDesc:"",
            leaveTitle:'',
            num:0,
            isLeave: false,
            go:true,
            createAudit:[],
            isGo:true
        },
        methods: {
            returnList:function () {
                var param = {
                    backRefresh: true,       //是否返回刷新
                }
                JSBridge.call(ROUTER, 'navigateBack', param)
            },
            audit: function (type) {
                var _this = this;
                if (type == '2') {
                    var param = {
                        data: '1',
                        title: '请输入驳回原因',
                        hint: '请输入驳回原因',
                        tipMsg: '请输入驳回原因',
                        confirmText: "确认",
                        cancelable: true
                    }
                    _this.inputResult = "等待输入..."
                    JSBridge.call(UI, 'showInputDialog', param, function (res) {
                        var res = res.sendData.content;
                        if (!res) {
                            JSBridge.call(UI, 'showToast', {title: "请简述驳回理由"})
                            return false;
                        }
                        var data = {
                            id: _this.mainId,
                            auditFlag: 2,
                            userId: _this.userId,
                            advise: res
                        }
                        axios.post('/signIn/applyCreateAudit.json', data)
                            .then(function (r) {
                                _this.isGo = true;
                                JSBridge.call(UI, 'hideLoading')
                                JSBridge.call(UI, 'showToast', {title: "驳回成功！"})

                                var param = {
                                    backRefresh: true,       //是否返回刷新
                                }
                                JSBridge.call(ROUTER, 'navigateBack', param)
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    })
                } else {
                    var param = {
                        title: "提示",
                        content: "确定要通过吗",
                        cancelText: "取消",
                        confirmText: "确定",
                        showCancel: true,
                        cancelable: false
                    }
                    _this.dialogResult = "等待选择..."
                    JSBridge.call(UI, 'showDialog', param, function (res) {
                        if ('确定' == res.sendData.data) {
                            JSBridge.call(UI, 'showLoading', {})
                            if (_this.isGo) {
                                var data = {
                                    id: _this.mainId,
                                    auditFlag: 1,
                                    userId: _this.userId,
                                    advise: '同意！'
                                }
                                _this.isGo = false;
                                axios.post('/signIn/applyCreateAudit.json', data)
                                    .then(function (r) {
                                        _this.isGo = true;
                                        JSBridge.call(UI, 'hideLoading')
                                        JSBridge.call(UI, 'showToast', {title: "审核成功！"})

                                        var param = {
                                            backRefresh: true,       //是否返回刷新
                                        }
                                        JSBridge.call(ROUTER, 'navigateBack', param)
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                    });
                            }
                        }
                    })
                }
            },
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if(mydiv.offsetParent === null){
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                         mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop+el.getBoundingClientRect().top + el.offsetHeight + "px")
                    }else{
                        mydiv.style.display = 'none';
                    }

                }else{
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            formatDate: function (now) {
                if (now) {
                    return new Date(now).Format(TimeFormat.middle)
                }
            },
            getMainInfo: function () {
                //获取当天请假信息
                var that = this;
                that.go=true;
                var obj = {
                    dialog: 'show'
                }
                prompt(JSON.stringify(obj))
                axios.post('/signIn/getLeaveMain.json', {mainId:that.mainId})
                    .then(function (data) {
                        console.log(data)
                        if(data.beginTime==data.endTime){
                            var date=new Date(data.leaveDate).Format("M")+"月"+new Date(data.leaveDate).Format("dd")+"日";
                            that.leaveTitle=date+" 申请请假"
                        }else{
                            that.leaveTitle=new Date(data.beginTime).Format("M")+"月"+new Date(data.beginTime).Format("dd")+"日"+" 至 "+new Date(data.endTime).Format("M")+"月"+new Date(data.endTime).Format("dd")+"日"+" 申请请假"
                        }
                        that.auditFlag=data.auditFlag;
                        that.leaveDesc=data.remark
                        that.isLeave=true
                        that.currentAuditorId=data.currentAuditorId;
                        that.createAudit=data.createAudit;
                        setTimeout(function () {
                            JSBridge.call(UI, 'hideLoading')
                        },1000)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },


        },
        mounted: function () {
            var that = this;
            that.getMainInfo();
        }
    })
</script>
<script>




</script>
</body>
</html>